<template>
	<view class="u-page">
		<u-navbar :title="Navbar.title" :title-bold="true" title-color="#040503" back-icon-color="#040503" :custom-back="comeback" :background="Navbar.background"
			:border-bottom="false" title-width="380"></u-navbar>
		<div class="body-cont">
			<ul class="content">
				<div class="conlirow">
					<div class="cont-right" style="width:100%;">
						<P class="adress flex">
							<span class="xmname">姓名：</span>
							<span class="name">
								<u-input v-model="name" type="text" height="100" placeholder="请填写真实姓名" />
							</span>
						</P>
						<P class="adress flex">
							<span class="xmname">电话：</span>
							<span class="name">
								<u-input v-model="phoneNum" type="number" height="100" placeholder="请填写电话号码" />
							</span>
						</P>
						<P class="adress flex">
							<span class="xmname">地区：</span>
							<span class="name">
								<u-input v-model="region" type="select" height="100" placeholder="请选择" @click="area_show = true" />
							</span>
							<u-picker mode="region" v-model="area_show" :default-selector="[0]" @confirm="confirmRegion"></u-picker>
						</P>
						
						<P class="adress flex">
							<span class="xmname">街道：</span>
							<span class="name">
								<u-input type="select" v-model="streetVillage" placeholder="请选择" @click="street_show = true"/>
							</span>
							<u-select v-model="street_show" mode="mutil-column-auto" :list="streetList" @confirm="confirm"></u-select>
						</P>
						
						<P class="adress">
							<span class="xmname" style="">详细地址：</span>
							<span class="name" style="width: 80%;">
								<u-input v-model="address" type="textarea" height="100" :auto-height="true"
									placeholder="请务必填写详细地址，以防包裹丢失。如：保利花园一期11栋1104或保利花园一期菜鸟驿站。" />
							</span>
						</P>
					</div>
				</div>
				<div class="submit-btn" @click="submit" v-if="isClick">提交</div>
				<div class="submit-btn2" v-else>提交</div>
			</ul>
		</div>
		
		<!-- 报名成功消息提示 -->
		<u-modal v-model="success_show" confirm-text="确定" confirm-color="#eb5468"
			:content="successContent" @confirm="goToWorkToDo">
		</u-modal>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				signupInfo: { // 报名信息
					partnerId: '',// 参与者id
					partnerName: '',// 参与者昵称
					partnerAvatarUrl: '',// 参与者头像
					mainId: '',
					orderStatus: '待提交',
					submitLimitDays: ''
				},
				name: '',// 收货人姓名
				phoneNum: '',// 手机号码
				region: '',
				streetVillage: '',
				address: '',
				area_show: false,
				street_show: false,
				streetList: [],
				success_show: false,// 报名成功弹窗
				successContent: '',// 报名成功提示内容
				isClick: true,
				Navbar: {
					title: '收货信息',
					background: {
						backgroundColor: '#f3e4e9',
					}
				},
			};
		},

		onLoad(options) {
			
			if (this.isNotNull(options.signupInfo)) {
				this.signupInfo = JSON.parse(decodeURIComponent(options.signupInfo));
				
				// 获取默认地址
				this.getDefaultAddress(this.signupInfo.partnerId, this.signupInfo.partnerName);
				
			}
		},

		methods: {

			/**
			 * 获取默认收货地址（BPM）
			 * @param {Object} partnerId
			 * @param {Object} partnerName
			 */
			async getDefaultAddress(partnerId, partnerName) {
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/minrest",
					appid: 'meily',
					wf_num: 'R_meily_BL014',
					userId: partnerId,
					nickName: partnerName,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == '200') {
					if (result.data) {
						this.name = result.data.Name;// 收货人姓名
						this.phoneNum = result.data.PhoneNum;// 手机号码
						this.region = result.data.Region;
						this.streetVillage = result.data.StreetVillage;
						this.address = result.data.Address;
						
						// 获取街道乡镇的下拉选择的值
						this.getStreetList(this.region);
					}
				}
			},
			
			/**
			 * 获取街道乡镇的下拉选择的值
			 */
			async getStreetList(region) {
				// 获取街道列表
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Archives',
					wf_num: 'R_Archives_BL027',
					Regin: region,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.streetList = result.data;
				}
			},
			
			/**
			 * 提交-确认报名
			 */
			async submit() {
				
				if(!this.isNotNull(this.name)){
					this.$u.toast("收货人姓名不能为空！");
					return;
				} else if(!this.verificationName(this.name)){
					this.$u.toast("收货人姓名至少包含一个字母或一个中文！");
					return;
				} else if(!this.isNotNull(this.phoneNum)){
					this.$u.toast("手机号码不能为空！");
					return;
				} else if(!this.verificationPhone(this.phoneNum)){
					this.$u.toast("手机号码不合法！");
					return;
				} else if(!this.isNotNull(this.region)){
					this.$u.toast("所属地区不能为空！");
					return;
				} else if(!this.isNotNull(this.streetVillage)){
					this.$u.toast("所属街道不能为空！");
					return;
				} else if(!this.isNotNull(this.address)){
					this.$u.toast("详细地址不能为空！");
					return;
				}
				
				let consigneeAddress = "";
				if(this.isNotNull(this.region)){
					consigneeAddress += this.region;
					
				} else if(this.isNotNull(this.streetVillage)){
					consigneeAddress += "-" + this.streetVillage;
					
				} else if(this.isNotNull(this.addresss)){
					consigneeAddress += " " + this.address;
				}
				
				// 设置不可点击
				this.isClick = false;
				this.showLoading();
				
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/evaluation/signup/join",
					partnerId: this.signupInfo.partnerId,// 参与者id
					partnerName: this.signupInfo.partnerName,// 参与者昵称
					partnerAvatarUrl: this.signupInfo.partnerAvatarUrl,// 参与者头像
					mainId: this.signupInfo.mainId,
					consigneeName: this.name,// 收货人姓名
					consigneePhoneNum: this.phoneNum,// 手机号码
					consigneeAddress: consigneeAddress,// 详细地址
					orderStatus: '待提交',
					loading: true ,// 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.hideLoading();
					this.success_show = true;
					this.successContent = '报名成功，请于'+ this.signupInfo.submitLimitDays +'天内提交成果，逾期作废';
				} else {
					this.isClick = true;
					this.$u.toast(result.msg);
				}
			},
			
			/**
			 * 跳转到【工作待办】
			 */
			goToWorkToDo(){
				this.$u.route('/pages_tabbar_contact/personal_contact/WorkToDo?backto=personalIndex');
			},
			
			/**
			 * 确认选择地区
			 * @param {Object} event
			 */
			async confirmRegion(event) {
				console.log("确认选择地区....");
				console.log(event);
				this.region = event.province.label + '-' + event.city.label + '-' + event.area.label;
				this.streetVillage = "";
			
				if (this.isNotNull(event.area.value)) {
			
					// 先清空数组
					this.streetList.splice(0, this.streetList.length);
			
					// 获取街道列表
					const userInfo = uni.getStorageSync('userInfo');
					let result = await this.$u.api.unifyRequest({
						userId: userInfo.userId,
						nickName: userInfo.nickName,
						appid: 'Archives',
						wf_num: 'R_Archives_BL027',
						provinceCode: event.province.value,
						cityCode: event.city.value,
						areaCode: event.area.value,
						loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
					});
					if (result.code == 200) {
						this.streetList = result.data
					}
				}
			},
			
			/**
			 * 确认选择街道乡镇
			 * @param {Object} event
			 */
			confirm(event) {
				console.log("确认选择街道乡镇....");
			    console.log(event);
				this.streetVillage = event[0].label + '-' + event[1].label;
			},

			showLoading() {
				wx.showLoading({
				  title: '提交中...',
				  icon: 'none',
				});
			},
			 
			hideLoading() {
				wx.hideLoading();
			},
		},
	};
</script>

<style scoped>
	.body-cont {
		padding-left: 18px;
		padding-right: 18px;
	}

	.content {
		padding-top: 20px;
	}

	ol,
	ul {
		list-style: none;
	}

	.conlirow {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 0px;
	}

	.cont-right {
		display: flex;
		flex-direction: column;
	}

	.cont-right p {
		width: 100%;
	}

	.adress {
		border-bottom: rgba(59, 53, 60, 0.1) dashed 1px;
	}

	.adress span {
		font-size: 16px;
		height: 50px;
		line-height: 50px;
	}

	.xmname {
		opacity: 0.7;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #3B353C;
		line-height: 22px;
	}

	.name {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #3B353C;
		letter-spacing: 0;
		line-height: 22px;
	}

	input {
		width: 80%;
		color: #000;
	}

	input {
		border: none;
		outline: none;
		font-size: 14px;
	}

	input,
	select {
		vertical-align: middle;
	}

	.shezhi {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 5px 0px;
	}

	.bianji {
		font-size: 14px;
		color: #e55e97;
		letter-spacing: 0;
	}

	.bianji label img {
		width: 16px;
		margin-top: 5px;
	}

	.submit-btn {
		width: 100%;
		text-align: center;
		background: #eb5468;
		border-radius: 9px;
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		color: #FFFFFF;
	}
	
	.submit-btn2 {
		width: 100%;
		text-align: center;
		background: #aeaeae;
		border-radius: 9px;
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		color: #FFFFFF;
	}

	.flex {
		display: flex;
	}
</style>